<!-- 师傅端进行的订单详情 -->
<!-- 师傅端待处理的订单详情 -->
<template>
	<block class="warp">
		<view class="Infobox" v-if="isfinsh">
			<view class="Infoboxform">
				<view class="textblock font32">报修单号：{{info.order_id}}
					<text v-if="info.status == '4'">待确认</text>
					<text v-if="info.status == '0'">已报修</text>
					<text v-if="info.status == '1'">待受理</text>
					<text v-if="info.status == '2'">待派工</text>
					<text v-if="info.status == '3'">进行中</text>
				</view>
				<view class="textblock ">联系人：{{info.user_name}}</view>
				<view class="textblock ">联系电话：<text class="c66">{{info.user_mobile}}</text><text
						class="iconfont cmain ml30" @click="callphone(info.user_mobile)">&#xe8b8;</text></view>
				<view class="textblock ">报修地址：{{info.address}} <text style="color: #007AFF;" @click="moveTo"
						class="ml30">导航</text> </view>
				<view class="textblock ">
					维修时间：
					{{info.start_time}}
				</view>
				<view class="textblock flex">
					上门师傅：
					<view class="user" v-for="(item,index) in worker">
						<image :src="item.avatar" class="userimg"></image>
						<view class="userinfo">
							<text class="name">
								{{item.nickname}}
								<text class="startmun">{{item.start}}.0</text>
								<text class="starticon" :class="'starticon'+item.start"></text>
							</text>
							<text class="priceone">工时费：{{item.unit_price}}元/小时</text>
							<text class="pricetwo">上门费：已付{{item.first_pay_price}}元</text>
						</view>
					</view>
				</view>
				<view class="textblock ">问题描述：{{info.mark}}</view>
				<!-- <view class="textblock "  @click="addrClick" >当前定位：<text class="c66">{{address}}</text> <text class='iconfontProtion'></text></view> -->
				<view class="btn bulebtn" :class="isshowtime == 1? 'hidebtn':''" @click="openAccept()">开始计时</view>
				<view class="textblock textblocktime " :class="isshowtime == 1? 'textblocktimeactve':''">
					正在计时中：
					<view class="percentbox">
						<view class="percentboxborder">
							<cmd-progress type="circle" :show-info='false' :percent="timesec/60*100" :width="86"
								:height="86" :strokeWidth="6" strokeColor="#FEC860" stroke-shape="square">
							</cmd-progress>
							<view class="percentboxmun">
								<text>{{timemun}}</text>分钟<text>{{ timesec}}</text>秒
							</view>
						</view>
					</view>
					<view class="allbtn">
						<view class="btnbox userbtn stopbox" @click="countine"
							:class="isusetime == 0?'acitvebtnbox':'' "><text class="userbtn stopbtn"></text> 继续计时</view>
						<view class="btnbox userbox" @click="stop" :class="isusetime == 1?'acitvebtnbox':'' "><text
								class="userbtn"></text>暂停计时</view>
						<view class="btnbox fishbox" @click="fishOrder()"><text class="fishbtn"></text>完成计时</view>
					</view>

				</view>
			</view>
		</view>


		</view>

		<zwyPopUp :ishide='isshowone'>
			<view class="boxtitle">
				<text class='iconfont' @click="closeplo()">&#xe692;</text>
			</view>
			<view class="boxInfo">
				<view class="boxInfotext">是否确认开始计时？</view>
				<view class="btn bulebtn" @click="isShowTimeFun()"> 确认计时</view>
			</view>
		</zwyPopUp>
	</block>
</template>

<script>
	import zwyPopUp from '@/components/zwy-popup/zwy-popup.vue'
	import cmdProgress from "@/components/cmd-progress/cmd-progress.vue"
	import {
		orderDetial,
		workTiming,
	} from '../../api/api.js'
	export default {
		components: {
			zwyPopUp,
			cmdProgress
		},
		data() {
			return {
				isshowtime: 0, //是否开始计时：1计时 ， 0不计时
				isshowone: false, //是否弹窗
				isusetime: 0, //显示暂停和继续计时按钮=》0：暂停    1：继续
				id: '', //产品的id值
				info: {},
				worker: {},
				form: {
					lng: "",
					lat: "",
				},
				timer: 0, //计时器时间戳
				type: 0, //1开始 2继续 3 暂停 4 结束
				address: "",
				isfinsh: false,
				work_time_type: "",
				work_time: "", //云端计时时间
				timemun: "00", //计时的分钟
				timesec: "00", //计时的秒钟
			}
		},

		onLoad: function(option) {
			let data = JSON.parse(option.data);
			console.log('数据', data)
			this.id = data.id
			this.datainit()
		},
		created() {
			this.getlocation()
		},
		methods: {
			callphone(e) {
				uni.makePhoneCall({
					phoneNumber: e
				});
			},
			getlocation() {
				let that = this
				uni.getLocation({
					type: 'wgs84',
					success(res) {
						console.log('用户位置信息', res)
						that.form = {
							"lng": res.longitude,
							"lat": res.latitude
						}
						console.log('获取的位置', that.form, res)
					}
				})
			},
			addrClick() { // 地址选择事件
				const _this = this;
				uni.chooseLocation({
					success: (res) => {
						console.log(res, 1)
						let {
							address,
							name,
							latitude,
							longitude
						} = res;
						_this.form.lng = longitude
						_this.form.lat = latitude
						_this.address = address + name;
					},
					fail: (res) => {
						console.log(res, 2)
					}
				})
			},
			// 开启计时器



			// 暂停
			stop() {
				this.type = 3
				this.workTiming()
				this.isusetime = false
				clearTimeout(this.Timer)
				uni.showToast({
					title: '暂停成功!',
					icon: 'none'
				})
			},
			// 继续
			countine() {
				uni.showToast({
					title: '开启成功!!',
					icon: 'none'
				})
				this.type = 2
				console.log(this.Timer)
				this.workTiming()
				this.isShowTimeFun()
			},
			// 调用导航
			moveTo() {
				// 使用微信内置地图查看位置
				wx.openLocation({
					'latitude': Number(this.data.info.lat),
					'longitude': Number(this.data.info.lng),
					scale: 28,
					name: this.data.info.address, //打开后显示的地址名称
				})
			},
			// 初始化
			datainit() {
				this.isfinsh = false
				let data = {
					id: this.id
				}
				orderDetial(data).then(res => {
					this.info = res.data.info
					this.worker = res.data.worker
					this.isfinsh = true
					this.work_time = res.data.info.work_time
					this.work_time_type = res.data.work_time_type

					if (this.work_time_type != 0) {
						this.isshowtime = 1
						console.log(this.isshowtime, 'isshowtime')
						if (this.work_time_type == 1 || this.work_time_type == 2) { //进来是计时中 继续计时
							this.timer = this.work_time
							console.log('后台给时间戳', this.timer)
							this.isShowTimeFun()
						}
						if (this.work_time_type == 3) { //进来是计时中 继续计时
							console.log('暂停时间', this.work_time)
							this.timer = this.work_time
							this.timemun = parseInt((this.timer % (1000 * 60 * 60)) / (1000 * 60));
							this.timesec = (this.timer % (1000 * 60)) / 1000;
						}
					}
				})
			},
			/* 关闭弹窗*/
			closeplo() {
				this.isshowone = false;
			},
			// 计时相关
			workTiming() {
				let data = {
					type: this.type,
					id: this.id,
					...this.form
				}
				workTiming(data).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					if (res.status != 200) return;
					// && res.status == 200
					if (this.type == 1) {
						this.isshowone = true;
					}
				})
			},
			/* 是否开始计时：*/
			openAccept() {
				this.getlocation()
				console.log('form', this.form)
				this.type = 1
				this.workTiming()
			},
			/* 开始计时功能：关闭弹窗--显示计时器--开始计时 */
			isShowTimeFun() {
				this.isshowone = false;
				this.isusetime = 1
				this.Timer = setInterval(() => {
					this.timer = this.timer + 1000
					let data = this.timer
					// console.log(this.timer)
					var hours = parseInt((data % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
					this.timemun = parseInt((data % (1000 * 60 * 60)) / (1000 * 60));
					this.timesec = (data % (1000 * 60)) / 1000;
					(hours < 10 ? ('0' + hours) : hours) + ':' + (this.timemun < 10 ? ('0' + this.timemun) :
						this.timemun) + ':' + (this.timesec < 10 ? ('0' + this.timesec) : this.timesec);
				}, 1000)
				this.isshowtime = 1;
			},
			/* 定单完成跳转：查看订单详情 */
			fishOrder() {
				// clearInterval(this.Timer)
				this.stop()
				this.isusetime = 0
				uni.showModal({
					title: '确认',
					content: `本次服务用时${this.timemun}分${this.timesec}秒,点击确认返回订单列表!`,
					success: (res) => {
						if (res.confirm) {

							this.type = 4
							this.workTiming()
							uni.navigateTo({
								url: "/pages/index/index"
							})
							// uni.navigateTo({
							// 	url: `/pages/sfOrderSubmit/sfOrderSubmit?id=` + this.id
							// })
						} else {
							thsi.countine()
						}
					},
				})

			}


		}
	}
</script>



<style scoped lang="less">
	.Infobox {
		background: #F6F9FF;
		padding: 60rpx 40rpx;
		// height: 100%;
		width: 100%;
		min-height: 100%;
		box-sizing: border-box;

		.Infoboxform {
			display: block;
			background-color: #FFFFFF;
			padding: 20rpx 40rpx 60rpx 40rpx;
			border-radius: 20rpx;
			box-shadow: 0 0 5rpx rgba(0, 0, 0, 0.2);
			// margin-bottom: 90rpx; 

			.textblock {
				font-size: 28rpx;
				font-weight: 500;
				line-height: 66rpx;
				color: #333333;
				border-bottom: 2rpx #F7F5F6 solid;

				.user {
					display: flex;

					.userimg {
						width: 140rpx;
						height: 140rpx;
						display: flex;
					}

					.name {
						font-size: 28rpx;
						font-weight: 400;
						line-height: 34rpx;
						color: #666666;
						display: block;
						padding: 0 0 0 24rpx;
						margin: 0 0 10rpx 0;

						.startmun {
							font-size: 24rpx;
							color: #FEC860;
							padding: 0 0 0 24rpx;
						}

						.starticon {
							width: 17rpx;
							height: 17rpx;
							display: inline-block;
							color: rgba(255, 255, 255, 0);
							background: url(../../static/zyyxsf.png) repeat-x center;
							background-size: contain;
							vertical-align: middle;
							margin: -2px 0 0 6px;

						}

						.starticon2 {
							width: 34rpx;
						}

						.starticon3 {
							width: 51rpx;
						}

						.starticon4 {
							width: 68rpx;
						}

						.starticon5 {
							width: 85rpx;
						}

					}

					.priceone {
						font-size: 24rpx;
						font-weight: 400;
						line-height: 22rpx;
						color: #5490FE;
						display: block;
						padding: 0 0 0 24rpx;
						margin: 24rpx 0;
					}

					.pricetwo {
						font-size: 24rpx;
						font-weight: 400;
						line-height: 22rpx;
						color: #FEC860;
						display: block;
						padding: 0 0 0 24rpx;
					}
				}
			}

			.textblocktime {
				display: none;
			}

			.textblocktimeactve {
				display: block;
			}

			.font32 {
				color: #5490FE;
				font-size: 32rpx;

				text {
					font-size: 24rpx;
					font-weight: 400;
					line-height: 26px;
					color: #FEC860;
					float: right;
				}
			}
		}

	}

	.textblock.flex {
		padding: 20rpx 0;
		justify-content: left;
		align-items: left;
	}

	.btn {
		width: 80%;
		height: 80rpx;
		font-size: 32rpx;
		font-weight: 500;
		line-height: 80rpx;
		color: #FFFFFF;
		background: #5490FE;
		box-shadow: 0px 3rpx 5rpx #5490FE;
		border-radius: 80rpx;
		text-align: center;
		margin: 16px auto;
	}

	.btn.yellowbtn {
		background: #FEC860;
		box-shadow: 0px 3rpx 5rpx #E6EFFF;
	}

	.boxtitle {
		display: block;
		text-align: center;
		margin: 22rpx 0;
		height: 36rpx;

		.texttitle {
			font-size: 28rpx;
			font-weight: 500;
			line-height: 32rpx;
			color: #333333;
			padding: 0 0 0 36px;
		}

		.iconfont {
			float: right;
			line-height: 34rpx;
		}
	}

	.boxInfo {
		width: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

		.boxInfotext {
			text-align: center;
			font-size: 32rpx;
			font-weight: 500;
			line-height: 26rpx;
			color: #333333;
			padding: 0 26rpx;

			.boxinput {
				display: flex;
				margin-top: 32rpx;

				text {
					font-size: 28rpx;
					font-weight: 500;
					line-height: 29rpx;
					color: #333333;
					margin-top: 8rpx;
				}

				.iconright {
					position: absolute;
					top: 45rpx;
					right: 55rpx;
					color: #999999;
					font-size: 28rpx;
					margin: 0;
				}

				.checkinput {
					width: 360rpx;
					height: 60rpx;
					background: #FFFFFF;
					border-radius: 4rpx;
					border: 1px solid #999999;
					font-size: 24rpx;
					font-weight: 400;
					line-height: 36rpx;
					color: #666666;
					text-align: left;
					padding: 0px 8rpx;
					box-sizing: border-box;
				}

				.textinput {
					width: 360rpx;
					height: 120rpx;
					background: #FFFFFF;
					border-radius: 4rpx;
					border: 1px solid #999999;
					font-size: 24rpx;
					font-weight: 400;
					line-height: 36rpx;
					color: #666666;
					text-align: left;
					padding: 4rpx 8rpx;
					box-sizing: border-box;

				}

			}
		}

		.btn {
			width: 400rpx;
			margin-top: 60rpx;
		}
	}

	.boxInfo.boxInfomartop {
		top: 56%;
	}

	.productli {
		font-size: 29rpx;
		font-weight: 500;
		line-height: 75rpx;
		color: #333333;
		text-align: left;
		display: block;
		line-height: 75rpx;
		border-bottom: 1px #e8e8e8 dashed;
		padding: 0 11rpx;
		box-sizing: border-box;
	}

	.iconfontProtion {
		width: 42rpx;
		height: 42rpx;
		display: inline-block;
		background: url(../../static/protionsf.png) no-repeat center;
		background-size: contain;
		vertical-align: middle;
		margin: -4rpx 0 0 0;
	}

	/* 计时样式 */
	.percentbox {
		text-align: center;

		.percentboxborder {
			border: 12rpx #CADEFD solid;
			padding: 5rpx;
			box-sizing: border-box;
			background: #ffffff;
			border-radius: 50%;
			display: inline-block;
			position: relative;

			.percentboxmun {
				position: absolute;
				top: 50%;
				left: 0;
				text-align: center;
				width: 100%;
				transform: translate(0px, -50%);
				font-size: 22rpx;
				font-weight: 400;
				line-height: 22rpx;
				color: #333333;

				text {
					font-size: 32rpx;
					line-height: 22rpx;
					color: #5490FE;
				}
			}
		}
	}

	.allbtn {
		display: block;
		width: 100%;
		font-size: 24rpx;
		font-weight: 400;
		line-height: 29rpx;
		color: #FFC860;
		display: inline-block;

		.btnbox {
			display: none;
			text-align: center;

			text {
				width: 80rpx;
				height: 80rpx;
				display: inline-block;
				background: url(../../static/sfuser.png) no-repeat center;
				background-size: cover;
				display: block;
				margin: 0 auto;
			}

			.stopbtn {
				background: url(../../static/sfstop.png) no-repeat center;
				background-size: cover;
			}

			.fishbtn {
				background: url(../../static/sffiesh.png) no-repeat center;
				background-size: cover;
			}
		}

		.acitvebtnbox,
		.fishbox {
			display: inline-block;
		}

	}

	.userbox {
		color: #5490FE;
	}

	.fishbox {
		color: #A0D675;
		float: right;
	}

	.hidebtn {
		display: none;
	}
</style>
